/*
 * @Description:通用面板标题行，包括标题，操作
 * @Author: Rfan
 * @Date: 2022-03-09 16:48:29
 * @LastEditTime: 2022-09-05 18:22:11
 */

import { useMemo, useState } from 'react';
import { Button, Space } from 'antd';
import classNames from 'classnames/bind';
import { useOrgAndUserContext } from '../contexts/OrgAndUserContext';
import AddUserDialog from './dialogs/AddUserDialog';
import styles from '../styles/userPane.module.scss';

const cx = classNames.bind(styles);

const PaneOperate = () => {
  const { selectDepartment, selectUserIds, deleteUserFunc } = useOrgAndUserContext();

  // 添加用户弹窗状态
  const [addUserVisible, setAddUserVisible] = useState(false);

  /**
   * @description: 删除选中的用户
   */
  const delUser = () => {
    deleteUserFunc(selectUserIds);
  };
  return (
    <div className={cx('pane-header')}>
      <div className={cx('title')}>用户列表</div>
      <div className={cx('operate')}>
        <Space>
          <Button disabled={selectUserIds.length <= 0} danger onClick={delUser}>
            删除
          </Button>
          <Button disabled>用户迁移</Button>
          <Button disabled>密码重置</Button>
          <Button disabled>添加兼职人员</Button>
          <Button
            disabled={!selectDepartment.id}
            onClick={() => {
              setAddUserVisible(true);
            }}
          >
            新建用户
          </Button>
        </Space>
      </div>
      {useMemo(
        () => (
          <AddUserDialog
            visible={addUserVisible}
            onClose={() => {
              setAddUserVisible(false);
            }}
          />
        ),
        [addUserVisible]
      )}
    </div>
  );
};

export default PaneOperate;
